<template>
  <div class="el-main">
    <el-tabs
      v-model="activeName"
      type="border-card"
      @tab-click="handleClick"
    >
      <el-tab-pane
        label="党员管理"
        name="first"
      >
        <div class="tab_content">
          <!--搜索筛选表单区域-->
          <el-form
            ref="CPC_queryForm"
            :model="CPCqueryParams"
            :inline="true"
            label-width="68px"
            label-position="right"
          >
            <el-form-item
              label="姓名"
              label-width="40px"
            >
              <el-input
                v-model="CPCqueryParams.name"
                clearable
                size="small"
                style="width: 140px"
                @keyup.enter.native="cpc_Query"
              />
            </el-form-item>
            <el-form-item
              label="性别"
              label-width="40px"
            >
              <el-select
                v-model="CPCqueryParams.gender"
                clearable
                size="small"
                style="width: 100px"
              >
                <el-option
                  v-for="dict in genderOptions"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="手机号码">
              <el-input
                v-model="CPCqueryParams.phone"
                clearable
                size="small"
                style="width: 180px"
                @keyup.enter.native="cpc_Query"
              />
            </el-form-item>
            <el-form-item label="现居住地">
              <el-input
                v-model="CPCqueryParams.address"
                clearable
                size="small"
                style="width: 180px"
                @keyup.enter.native="cpc_Query"
              />
            </el-form-item>
            <el-form-item>
              <el-button
                type="primary"
                icon="el-icon-search"
                size="mini"
                @click="cpc_Query"
              >搜索</el-button>
              <el-button
                icon="el-icon-refresh"
                size="mini"
                @click="resetMemberQuery"
              >重置</el-button>
            </el-form-item>
          </el-form>
          <!--身份认证审核、导入、新增、导出、删除-->
          <el-row
            :gutter="10"
            class="mb8"
          >
            <el-col :span="1.5">
              <el-badge
                is-dot
                class="item"
              >
                <el-button
                  size="mini"
                  type="warning"
                  plain
                  @click="cpcMemberIdentifyDialogFlag = true"
                >身份认证审核</el-button>
              </el-badge>
            </el-col>
            <el-col :span="1.5">
              <el-button
                type="primary"
                plain
                icon="el-icon-plus"
                size="mini"
                @click="cpcMemberAddDialogFlag = true"
              >新增</el-button>
            </el-col>
            <el-col :span="1.5">
              <el-button
                type="danger"
                plain
                icon="el-icon-delete"
                size="mini"
                @click="deleteCpcMember"
              >删除</el-button>
            </el-col>
            <el-col :span="1.5">
              <el-button
                type="info"
                plain
                icon="el-icon-upload2"
                size="mini"
                @click="handleImport"
              >导入</el-button>
            </el-col>
            <el-col :span="1.5">
              <el-button
                type="success"
                plain
                icon="el-icon-download"
                size="mini"
                :loading="export_loading"
                @click="handleExport"
              >导出</el-button>
            </el-col>
          </el-row>
          <!--党员名单表格区-->
          <el-table
            v-loading="query_loading"
            :data="cpc_list"
            @selection-change="handleSelectionChange"
          >
            <el-table-column
              type="selection"
              width="50"
              align="center"
            />
            <el-table-column
              label="身份证号"
              align="center"
              prop="ID_number"
              width="180"
            />
            <el-table-column
              label="姓名"
              align="center"
              prop="name"
            />
            <el-table-column
              label="手机号码"
              align="center"
              prop="phone"
              width="120"
            />
            <el-table-column
              label="性别"
              align="center"
              prop="gender"
              width="60"
            />
            <el-table-column
              label="出生日期"
              align="center"
              prop="birth"
              width="120"
            />
            <el-table-column
              label="党龄"
              align="center"
              prop="cpc_age"
              width="60"
            />
            <el-table-column
              label="现居住地"
              align="center"
              prop="address"
              width="200"
              :show-overflow-tooltip="true"
            />
            <!--            <el-table-column label="备注" align="center" prop="remark" width="120" :show-overflow-tooltip="true"/>-->
            <el-table-column
              label="操作"
              align="center"
              width="160"
              class-name="small-padding fixed-width"
            >
              <template slot-scope="scope">
                <!--                <el-button size="mini"-->
                <!--                           type="text"-->
                <!--                           icon="el-icon-view">查看</el-button>-->
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-view"
                  @click="to_cpc_member_page"
                >查看</el-button>
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-edit"
                  @click="edit_cpc_member_dialog_flag = true"
                >编辑</el-button>
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-delete"
                  @click="deleteCpcMember"
                >删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <!--分页器-->
          <pagination
            v-show="total>0"
            :total="total"
            :page.sync="CPCqueryParams.pageNum"
            :limit.sync="CPCqueryParams.pageSize"
            @pagination="get_cpc_list"
          />
        </div>
        <!--          党员身份认证审核对话框-->
        <el-dialog
          :visible.sync="cpcMemberIdentifyDialogFlag"
          title="身份认证审核"
          center
        >
          <el-table :data="identifyList">
            <el-table-column prop="ID_number" label="身份证号" width="160" />
            <el-table-column prop="name" label="申请人" width="70" />
            <el-table-column prop="phone" label="联系方式" width="110" />
            <el-table-column prop="address" label="现居住地" />
            <el-table-column prop="state" label="状态" width="70" />
            <el-table-column
              label="操作"
              align="center"
              width="120"
              class-name="small-padding fixed-width"
            >
              <template slot-scope="scope">
                <el-button
                  v-if="scope.row.state=='未处理'"
                  size="mini"
                  type="text"
                  style="color: rgb(19, 206, 102)"
                  icon="el-icon-success"
                  @click="pass_cpc_member_check(scope.row)"
                >通过</el-button>
                <el-button
                  v-if="scope.row.state=='未处理'"
                  size="mini"
                  type="text"
                  style="color: red"
                  icon="el-icon-error"
                  @click="reject_cpc_member_check(scope.row)"
                >驳回</el-button>
                <el-button
                  v-if="scope.row.state!='未处理'"
                  size="mini"
                  type="text"
                  style="color: gray"
                  icon="el-icon-error"
                  @click="scope.row.state='未处理'"
                >撤销操作</el-button>
              </template>
            </el-table-column>
          </el-table>
          <span slot="footer" class="dialog-footer" style="text-align: center">
            <el-button @click="cpcMemberIdentifyDialogFlag = false">关 闭</el-button>
          </span>
        </el-dialog>
        <!--          添加党员对话框-->
        <el-dialog
          :visible.sync="cpcMemberAddDialogFlag"
          title="添加党员"
          center
          :before-close="handle_add_cpc_dialog_close"
        >
          <!--            进度条-->
          <el-row style="margin-bottom: 10px">
            <el-col :span="16" offset="4">
              <el-steps :active="active" finish-status="success" align-center>
                <el-step title="填写身份证号" />
                <el-step title="填写党员信息" />
              </el-steps>
            </el-col>
          </el-row>
          <!--            进度条第一步-->
          <el-row v-if="active==0" :gutter="20">
            <el-col :span="16" offset="4">
              <el-input
                v-if="active==0"
                v-model="new_cpc_info.ID_number"
                placeholder="请输入党员身份证号"
              />
            </el-col>
          </el-row>
          <!--            进度条第二步-->
          <el-form
            v-if="active==1"
            ref="new_cpc_form"
            :model="new_cpc_info"
            label-width="80px"
          >
            <el-row>
              <el-col :span="6">
                <el-form-item label="性别">
                  <el-select
                    v-model="new_cpc_info.gender"
                    size="small"
                    style="width: 100px"
                  >
                    <el-option label="男" value="男" />
                    <el-option label="女" value="女" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="民族">
                  <el-input v-model="new_cpc_info.name" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="籍贯">
                  <el-input v-model="new_cpc_info.name" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="出生日期">
                  <el-date-picker
                    v-model="new_cpc_info.birth"
                    type="date"
                    placeholder="选择日期"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="入党时间">
                  <el-date-picker
                    v-model="new_cpc_info.join_date"
                    type="date"
                    placeholder="选择日期"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="联系方式">
                  <el-input v-model="new_cpc_info.phone" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="现居住地">
                  <el-input v-model="new_cpc_info.address" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-form-item label="备注信息">
              <el-input v-model="new_cpc_info.remark" />
            </el-form-item>
          </el-form>
          <!--            <el-button style="margin-top: 12px;" @click="next">下一步</el-button>-->
          <span slot="footer" class="dialog-footer" style="text-align: center">
            <!--              <el-button @click="">添 加</el-button>-->
            <el-button @click="handle_add_cpc_dialog_close">取 消</el-button>
            <el-button v-if="active==0" plain type="success" @click="check_user_exist(new_cpc_info.ID_number)">下一步</el-button>
            <el-button v-if="active==1" plain type="success" @click="add_cpc_member">完 成</el-button>
          </span>
        </el-dialog>
        <!--          编辑党员信息对话框-->
        <el-dialog
          :visible.sync="edit_cpc_member_dialog_flag"
          title="编辑党员信息"
          center
        >
          <el-form
            label-width="80px"
          >
            <el-row>
              <el-col :span="8">
                <el-form-item label="姓名">
                  <el-input v-model="cpc_list[0].name" :disabled="true" />
                </el-form-item>
              </el-col>
              <el-col :span="16">
                <el-form-item label="身份证号">
                  <el-input v-model="cpc_list[0].ID_number" :disabled="true" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="6">
                <el-form-item label="性别">
                  <el-select
                    v-model="cpc_list[0].gender"
                    size="small"
                    style="width: 100px"
                  >
                    <el-option label="男" value="男" />
                    <el-option label="女" value="女" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="民族">
                  <el-input v-model="cpc_list[0].nation" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="籍贯">
                  <el-input v-model="cpc_list[0].register_add" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="出生日期">
                  <el-date-picker
                    :default-value="new Date('5/1/1974')"
                    type="date"
                    placeholder="选择日期"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="入党时间">
                  <el-date-picker
                    :default-value="new Date('5/1/1997')"
                    type="date"
                    placeholder="选择日期"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="联系方式">
                  <el-input v-model="cpc_list[0].phone" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="现居住地">
                  <el-input v-model="cpc_list[0].address" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-form-item label="备注信息">
              <el-input v-model="cpc_list[0].remark" />
            </el-form-item>
          </el-form>
          <!--            <el-button style="margin-top: 12px;" @click="next">下一步</el-button>-->
          <span slot="footer" class="dialog-footer" style="text-align: center">
            <!--              <el-button @click="">添 加</el-button>-->
            <el-button @click="edit_cpc_member_dialog_flag = false">取 消</el-button>
            <el-button plain type="primary" @click="edit_cpc_member">完 成</el-button>
          </span>
        </el-dialog>
      </el-tab-pane>

      <el-tab-pane
        label="论坛管理"
        name="second"
      >
        <div class="tab_content">
          <!--          <pre><h1>今日新帖：9  活跃人数：23   帖子总数：320</h1></pre>-->
          <!--          帖子搜索筛选框-->
          <el-form
            ref="Post_queryForm"
            :model="BBSqueryParams"
            :inline="true"
            label-width="68px"
            label-position="right"
          >
            <el-form-item
              label="标题"
              label-width="40px"
            >
              <el-input
                v-model="BBSqueryParams.title"
                clearable
                size="small"
                style="width: 160px"
                @keyup.enter.native="post_Query"
              />
            </el-form-item>
            <el-form-item
              label="发帖人"
              label-width="60px"
            >
              <el-input
                v-model="BBSqueryParams.author"
                clearable
                size="small"
                style="width: 100px"
                @keyup.enter.native="post_Query"
              />
            </el-form-item>
            <el-form-item label="发帖时间">
              <el-date-picker
                v-model="BBSqueryParams.create_time"
                type="daterange"
                unlink-panels
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                size="small"
                style="width: 300px"
              />
            </el-form-item>
            <el-form-item>
              <el-button
                type="primary"
                icon="el-icon-search"
                size="mini"
                @click="post_Query"
              >搜索</el-button>
              <el-button
                icon="el-icon-refresh"
                size="mini"
                @click="resetMemberQuery"
              >重置</el-button>
              <!--              <el-button icon="el-icon-microphone" size="mini" type="warning">只看我的</el-button>-->
            </el-form-item>
          </el-form>
          <!--          左侧是新建，置顶，删除，禁言，右侧是我的发布，举报审核，禁言名单-->
          <el-row
            :gutter="10"
            class="mb8"
          >
            <el-col :span="8">
              <el-button
                type="success"
                plain
                icon="el-icon-plus"
                size="mini"
                @click="new_post_dialog_flag = true"
              >新建</el-button>
              <el-button
                type="primary"
                plain
                icon="el-icon-upload2"
                size="mini"
                :loading="export_loading"
                @click="post_to_top"
              >置顶</el-button>
              <el-button
                type="danger"
                plain
                icon="el-icon-delete"
                size="mini"
                @click="delete_cpc_post"
              >删除</el-button>
            </el-col>
            <el-col
              :span="8"
              :offset="8"
              class="right_float"
            >
              <el-button
                type="success"
                size="mini"
              >我的发布</el-button>
              <el-button
                type="warning"
                size="mini"
                @click="ban_dialog_flag = true"
              >禁言名单</el-button>
              <el-button
                type="danger"
                size="mini"
                @click="post_report_check_dialog_flag = true"
              >举报审核</el-button>
            </el-col>
          </el-row>
          <!--          帖子列表-->
          <el-table
            v-loading="query_loading"
            :data="post_list"
            @selection-change="handleSelectionChange"
          >
            <el-table-column
              type="selection"
              width="50"
              align="center"
            />
            <el-table-column
              label="标题"
              align="center"
              prop="title"
            />
            <el-table-column
              label="发帖人"
              align="center"
              prop="author_name"
              width="120"
            />
            <el-table-column
              label="发帖时间"
              align="center"
              prop="create_time"
              width="150"
            />
            <el-table-column
              label="状态"
              align="center"
              prop="top_status"
              width="80"
            />
            <el-table-column
              label="查看数"
              align="center"
              prop="views"
              width="70"
            />
            <el-table-column
              label="互动数"
              align="center"
              prop="comments"
              width="70"
            />
            <el-table-column
              label="操作"
              align="center"
              width="220"
              class-name="small-padding fixed-width"
            >
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-view"
                  @click="view_post_dialog_flag = true"
                >查看</el-button>
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-delete"
                  @click="delete_cpc_post"
                >删除</el-button>
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-warning-outline"
                  @click="select_ban_time"
                >禁言</el-button>
              </template>
            </el-table-column>
          </el-table>
          <!--分页器-->
          <pagination
            v-show="total>0"
            :total="total"
            :page.sync="BBSqueryParams.pageNum"
            :limit.sync="BBSqueryParams.pageSize"
            @pagination="getList"
          />
        </div>
        <!--        对话框-->
        <el-dialog
          :visible.sync="new_post_dialog_flag"
          title="新建论坛帖"
          center
        >
          <el-form
            :model="new_cpc_post_info"
            label-width="80px"
          >
            <el-form-item label="标题">
              <el-input v-model="new_cpc_post_info.title" placeholder="请输入标题" />
            </el-form-item>
            <el-form-item label="内容">
              <el-input
                v-model="new_cpc_post_info.content"
                type="textarea"
                :rows="4"
                placeholder="请输入内容"
              />
            </el-form-item>
            <el-form-item label="添加图片">
              <el-upload
                class="upload-demo"
                action="https://jsonplaceholder.typicode.com/posts/"
                :on-preview="handlePreview"
                :on-remove="handleRemove"
                :file-list="fileList"
                list-type="picture"
              >
                <el-button size="small" type="primary">点击上传</el-button>
                <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
              </el-upload>
            </el-form-item>
            <el-form-item label="是否置顶">
              <el-switch
                v-model="new_cpc_post_info.top_status"
                active-color="#13ce66"
                inactive-color="#ff4949"
              />
            </el-form-item>
          </el-form>
          <!--            <el-button style="margin-top: 12px;" @click="next">下一步</el-button>-->
          <span slot="footer" class="dialog-footer" style="text-align: center">
            <!--              <el-button @click="">添 加</el-button>-->
            <el-button @click="new_post_dialog_flag = false">取 消</el-button>
            <el-button
              plain
              type="primary"
              @click="create_cpc_post"
            >发 布</el-button>
          </span>
        </el-dialog>
        <el-dialog
          :visible.sync="ban_dialog_flag"
          title="禁言名单"
          center
        >
          <el-table :data="ban_user_list">
            <el-table-column prop="name" label="姓名" width="100" />
            <el-table-column prop="free_time" label="解禁时间" width="200" />
            <el-table-column prop="reason" label="禁言原因" width="150" />
            <el-table-column
              label="操作"
              align="center"
              width="120"
              class-name="small-padding fixed-width"
            >
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-success"
                  @click="cancel_ban"
                >解除禁言</el-button>
              </template>
            </el-table-column>
          </el-table>
          <!--            <el-button style="margin-top: 12px;" @click="next">下一步</el-button>-->
          <span slot="footer" class="dialog-footer" style="text-align: center">
            <!--              <el-button @click="">添 加</el-button>-->
            <el-button @click="ban_dialog_flag = false">关 闭</el-button>
          </span>
        </el-dialog>
        <el-dialog :visible.sync="post_report_check_dialog_flag" title="帖子举报审核" center>
          <el-table :data="report_post_list">
            <el-table-column prop="author_name" label="发布者" width="70" />
            <el-table-column prop="title" label="标题" width="150">
              <template slot-scope="scope">
                <a @click="view_post_dialog_flag = true">{{
                  scope.row.title
                }}</a>
              </template>
            </el-table-column>
            <el-table-column prop="reason" label="举报类型" width="80" />
            <el-table-column prop="info" label="举报理由" />
            <el-table-column prop="state" label="状态" width="80" />
            <el-table-column
              label="操作"
              align="center"
              width="100"
              class-name="small-padding fixed-width"
            >
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="text"
                  style="color: rgb(19, 206, 102)"
                  icon="el-icon-success"
                  @click="reject_report"
                >驳回举报</el-button>
                <el-button
                  size="mini"
                  type="text"
                  style="color: red"
                  icon="el-icon-error"
                  @click="delete_cpc_post"
                >删除帖子</el-button>
                <el-button
                  size="mini"
                  type="text"
                  style="color: gray"
                  icon="el-icon-error"
                  @click="select_ban_time"
                >禁言</el-button>
              </template>
            </el-table-column>
          </el-table>
          <span slot="footer" class="dialog-footer" style="text-align: center">
            <el-button @click="post_report_check_dialog_flag = false">关 闭</el-button>
          </span>
        </el-dialog>
        <el-dialog
          :visible.sync="view_post_dialog_flag"
          title="帖子详情"
          center
        >
          <el-row style="margin-bottom: 20px">
            <el-col span="4">
              <div style="font-size: large; font-weight: bolder; ">标题: </div>
            </el-col>
            <el-col span="20">
              <div>测试测试测试测试</div>
            </el-col>
          </el-row>
          <el-row style="margin-bottom: 20px">
            <el-col span="4">
              <div style="font-size: large; font-weight: bolder; ">正文: </div>
            </el-col>
            <el-col span="20">
              <div>6日，恐龙足迹研究团队宣布在四川古蔺县黄荆镇原林村的金鱼溪发现了一批恐龙足迹。这些恐龙足迹为实雷龙足迹的一个新种，并命名为野比氏实雷龙足迹。<br>测试测试测试测试<br>测试测试测试测试</div>
            </el-col>
          </el-row>
          <el-row style="margin-bottom: 20px">
            <el-col span="4">
              <div style="font-size: large; font-weight: bolder; ">图片: </div>
            </el-col>
            <el-col span="20">
              <el-image
                style="width: 100px; height: 100px; "
                :src="url"
                :preview-src-list="srcList"
                z-index="10000"
              />
            </el-col>
          </el-row>
          <el-row style="margin-bottom: 20px">
            <el-col span="4">
              <div style="font-size: large; font-weight: bolder; ">评论: </div>
            </el-col>
            <el-col span="20">
              <el-table
                :data="comment_list"
                style="width: 100%"
                max-height="150px"
                :cell-style="{padding: '5px 0'}"
              >
                <el-table-column
                  prop="time"
                  label="时间"
                  width="180px"
                />
                <el-table-column
                  prop="name"
                  label="姓名"
                  width="80px"
                />
                <el-table-column
                  prop="content"
                  label="评论"
                />
              </el-table>
            </el-col>
          </el-row>
          <span slot="footer" class="dialog-footer" style="text-align: center">
            <el-button @click="view_post_dialog_flag = false">关 闭</el-button>
          </span>
        </el-dialog>
      </el-tab-pane>

      <el-tab-pane
        label="活动管理"
        name="third"
      >
        <div class="tab_content">
          <!--          活动搜索筛选框-->
          <el-form
            ref="Activity_queryForm"
            :model="ActivityqueryParams"
            :inline="true"
            label-width="68px"
            label-position="right"
          >
            <el-form-item label="活动信息">
              <el-input
                v-model="ActivityqueryParams.info"
                clearable
                size="small"
                style="width: 160px"
                @keyup.enter.native="activity_Query"
              />
            </el-form-item>
            <el-form-item label="发布时间">
              <el-date-picker
                v-model="ActivityqueryParams.create_time"
                type="daterange"
                unlink-panels
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                size="small"
                style="width: 250px"
              />
            </el-form-item>
            <el-form-item label="活动时间">
              <el-date-picker
                v-model="ActivityqueryParams.hold_time"
                type="daterange"
                unlink-panels
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                size="small"
                style="width: 250px"
              />
            </el-form-item>
            <el-form-item>
              <el-button
                type="primary"
                icon="el-icon-search"
                size="mini"
                @click="activity_Query"
              >搜索</el-button>
              <el-button
                icon="el-icon-refresh"
                size="mini"
                @click="resetMemberQuery"
              >重置</el-button>
              <!--              <el-button icon="el-icon-microphone" size="mini" type="warning">只看我的</el-button>-->
            </el-form-item>
          </el-form>
          <!--新建活动，删除活动，发送提醒-->
          <el-row
            :gutter="10"
            class="mb8"
          >
            <el-col :span="1.5">
              <el-button
                type="primary"
                plain
                icon="el-icon-plus"
                size="mini"
                @click="new_activity_dialog_flag = true"
              >新建活动</el-button>
            </el-col>
            <el-col :span="1.5">
              <el-button
                type="danger"
                plain
                icon="el-icon-delete"
                size="mini"
                :disabled="multiple"
                @click="delete_activity"
              >删除活动</el-button>
            </el-col>
            <el-col :span="1.5">
              <el-button
                type="success"
                plain
                icon="el-icon-bell"
                size="mini"
                @click="operation_success"
              >发送提醒</el-button>
            </el-col>
          </el-row>
          <!--          帖子列表-->
          <el-table
            v-loading="query_loading"
            :data="activity_list"
            @selection-change="handleSelectionChange"
          >
            <el-table-column
              type="selection"
              width="50"
              align="center"
            />
            <el-table-column
              label="活动标题"
              align="center"
              prop="title"
              width="180"
            />
            <el-table-column
              label="活动时间"
              align="center"
              prop="time"
              width="120"
            />
            <el-table-column
              label="活动地点"
              align="center"
              prop="place"
              min-width="120"
            />
            <el-table-column
              label="发布人"
              align="center"
              prop="create_person"
              width="100"
            />
            <el-table-column
              label="发布时间"
              align="center"
              prop="create_time"
              width="120"
            />
            <el-table-column
              label="查看人数"
              align="center"
              prop="views"
              width="50"
            />
            <el-table-column
              label="报名人数"
              align="center"
              prop="signs"
              width="50"
            />
            <el-table-column
              label="参与人数"
              align="center"
              prop="joins"
              width="50"
            />
            <el-table-column
              label="操作"
              align="center"
              width="180"
              class-name="small-padding fixed-width"
            >
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-view"
                  @click="view_activity_dialog_flag = true"
                >查看</el-button>
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-edit"
                >编辑</el-button>
                <el-button
                  v-if="scope.row.userId !== 1"
                  size="mini"
                  type="text"
                  icon="el-icon-delete"
                  @click="delete_activity"
                >删除</el-button>
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-bell"
                  @click="operation_success"
                >提醒</el-button>
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-circle-check"
                  @click="sign_dialog_flag = true"
                >签到</el-button>
              </template>
            </el-table-column>
          </el-table>
          <!--分页器-->
          <pagination
            v-show="total>0"
            :total="total"
            :page.sync="ActivityqueryParams.pageNum"
            :limit.sync="ActivityqueryParams.pageSize"
            @pagination="getList"
          />
        </div>
        <el-dialog :visible.sync="new_activity_dialog_flag" title="新建活动" center>
          <el-form
            :model="new_activity_info"
            label-width="80px"
          >
            <el-form-item label="标题">
              <el-input v-model="new_activity_info.title" placeholder="请输入标题" />
            </el-form-item>
            <el-form-item label="内容">
              <el-input
                v-model="new_activity_info.content"
                type="textarea"
                :rows="4"
                placeholder="请输入活动介绍"
              />
            </el-form-item>
            <el-form-item label="活动时间">
              <el-date-picker
                v-model="new_activity_info.time"
                type="datetime"
                placeholder="选择日期时间"
              />
            </el-form-item>
            <el-form-item label="活动地点">
              <el-input v-model="new_activity_info.place" placeholder="请输入地点" />
            </el-form-item>
          </el-form>
          <!--            <el-button style="margin-top: 12px;" @click="next">下一步</el-button>-->
          <span slot="footer" class="dialog-footer" style="text-align: center">
            <el-button @click="new_activity_dialog_flag = false">取 消</el-button>
            <el-button
              plain
              type="primary"
              @click="create_activity"
            >创 建</el-button>
          </span>
        </el-dialog>
        <el-dialog :visible.sync="sign_dialog_flag" title="签到二维码" center>
          <div style="width: 300px; height: 300px; margin: 0 auto">
            <el-image
              style="width: 300px; height: 300px; padding: 0 auto"
              :src="sign_pic_url"
              :fit="fill"
            />
          </div>
          <span slot="footer" class="dialog-footer" style="text-align: center">
            <el-button @click="sign_dialog_flag = false">关 闭</el-button>
          </span>
        </el-dialog>
        <el-dialog :visible.sync="view_activity_dialog_flag" title="活动详情" center>
          <el-row style="margin-bottom: 20px">
            <el-col span="4">
              <div style="font-size: large; font-weight: bolder; ">标题: </div>
            </el-col>
            <el-col span="20">
              <div>测试测试测试测试</div>
            </el-col>
          </el-row>
          <el-row style="margin-bottom: 20px">
            <el-col span="4">
              <div style="font-size: large; font-weight: bolder; ">活动介绍: </div>
            </el-col>
            <el-col span="20">
              <div>为纪念中国共产党建党100周年,以实际行动践行党员光荣职责<br>测试测试测试测试测试测试测<br>测试测试测试测试</div>
            </el-col>
          </el-row>
          <el-row style="margin-bottom: 20px">
            <el-col span="4">
              <div style="font-size: large; font-weight: bolder; ">活动时间: </div>
            </el-col>
            <el-col span="8">
              <div style="font-size: large;">2021-7-1 9:30:00</div>
            </el-col>
            <el-col span="4">
              <div style="font-size: large; font-weight: bolder; ">活动地点: </div>
            </el-col>
            <el-col span="8">
              <div style="font-size: large;">绿洲小区羽毛球馆</div>
            </el-col>
          </el-row>
          <el-row style="margin-bottom: 20px">
            <el-col span="4">
              <div style="font-size: large; font-weight: bolder; ">报名列表: </div>
            </el-col>
            <el-col span="20">
              <el-table
                :data="sign_list"
                style="width: 100%"
                max-height="130px"
                :cell-style="{padding: '5px 0'}"
              >
                <el-table-column
                  type="index"
                  width="50"
                />
                <el-table-column
                  prop="name"
                  label="姓名"
                />
                <el-table-column
                  prop="time"
                  label="报名时间"
                />
              </el-table>
            </el-col>
          </el-row>
          <el-row style="margin-bottom: 20px">
            <el-col span="4">
              <div style="font-size: large; font-weight: bolder; ">签到列表: </div>
            </el-col>
            <el-col span="20">
              <el-table
                :data="join_list"
                style="width: 100%"
                max-height="150px"
                :cell-style="{padding: '5px 0'}"
              >
                <el-table-column
                  type="index"
                  width="50"
                />
                <el-table-column
                  prop="name"
                  label="姓名"
                />
                <el-table-column
                  prop="time"
                  label="签到时间"
                />
              </el-table>
            </el-col>
          </el-row>
          <span slot="footer" class="dialog-footer" style="text-align: center">
            <el-button @click="view_activity_dialog_flag = false">关 闭</el-button>
          </span>
        </el-dialog>
      </el-tab-pane>

      <el-tab-pane
        label="统计报表"
        name="fourth"
      >
        <div class="tab_content">

          <el-divider content-position="left">党员数据统计</el-divider>
          <!--          党员性别年龄饼图 + 党龄柱状图   此处还想加一个党员活跃度排行榜，展示论坛和活动积极参与的党员-->
          <div class="two_chart_line">
            <el-card
              class="left_card_of_2charts"
              shadow="hover"
              :body-style="{ padding: '5px'}"
            >
              <div
                id="cpc_member_chart"
                style="width: 450px; height: 300px"
              />
            </el-card>
            <el-card
              id="cpc_age_chart_card"
              shadow="hover"
              :body-style="{ padding: '5px'}"
            >
              <div
                id="cpc_age_chart"
                style="width: 450px; height: 300px"
              />
            </el-card>
          </div>
          <!--          党员活跃度榜单前十名-->
          <el-card
            shadow="hover"
            :body-style="{ padding: '5px'}"
            style="margin-top: 10px;"
          >
            <div style="font-size: large;font-weight: bolder; margin: 15px auto; text-align: center">党员活跃度榜单前十名</div>
            <el-table
              :data="active_cpc_member_data"
              :cell-style="{padding: '5px 0', textAlign: 'center'}"
              :header-cell-style="{textAlign: 'center'}"
              highlight-current-row
              height="250"
              border
              style="width: 85%; margin: 5px auto"
            >
              <el-table-column
                prop="index"
                label="排名"
              />
              <el-table-column
                prop="name"
                label="姓名"
              />
              <el-table-column
                prop="gender"
                width="50"
                label="性别"
              />
              <el-table-column
                prop="age"
                width="60"
                label="年龄"
              />
              <el-table-column
                prop="cpc_age"
                width="60"
                label="党龄"
              />
              <el-table-column
                prop="signs"
                label="活动报名/次"
              />
              <el-table-column
                prop="joins"
                label="参与活动/次"
              />
              <el-table-column
                prop="posts"
                label="发帖讨论/条"
              />
              <el-table-column
                prop="comments"
                label="评论互动/次"
              />
            </el-table>
          </el-card>

          <el-divider content-position="left">论坛数据统计</el-divider>
          <div class="bbs_stats_container">
            <!--            论坛热度热力图-->
            <div class="heat_chart_container">
              <el-card
                shadow="hover"
                :body-style="{ padding: '5px'}"
                style="margin-bottom: 10px"
              >
                <h3 style="text-align: center">党员论坛热度统计图</h3>
                <el-row>
                  <el-col
                    span="8"
                    offset="8"
                  >
                    <el-date-picker
                      v-model="heat_data_range"
                      type="daterange"
                      range-separator="至"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                    />
                  </el-col>
                  <el-col
                    span="1"
                    offset="1"
                  >
                    <el-button
                      icon="el-icon-search"
                      circle
                      @click="draw_cpc_bbs_heat_chart"
                    />
                  </el-col>
                </el-row>
                <div
                  id="cpc_bbs_heat_chart"
                  style="width: 900px; height: 250px; margin: 0 auto"
                />
              </el-card>
            </div>
            <!--            词云图和论坛管理数据统计表-->
            <div class="two_chart_line">
              <el-card
                class="left_card_of_2charts"
                shadow="hover"
                :body-style="{ padding: '5px'}"
              >
                <h3 style="text-align: center">{{ this.heat_data_range[0].getFullYear() }}年度党员论坛热度统计图</h3>
                <div
                  id="mywordcloud"
                  :style="{width: '600px', height: '280px'}"
                  :data="word_data"
                  style="display: inline-block"
                />
              </el-card>
              <el-card
                shadow="hover"
                :body-style="{ padding: '5px'}"
              >
                <h3 style="text-align: center">论坛管理工作量化表</h3>
                <!--                表格内容：处理举报信息xx条，处理违规发言xx人次，宣传互动xxx次，论坛日均活跃人数xx人，日均新增内容xx条，日均互动数xx条，-->
                <div style="width: 400px; height: 280px; display: inline-block;">
                  <div style="width: 100%; text-align: center">
                    <el-date-picker
                      v-model="bbs_stats_range"
                      size="mini"
                      style="width: 250px; margin: 0 10px;"
                      type="daterange"
                      range-separator="至"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                    />
                    <el-button
                      size="mini"
                      icon="el-icon-search"
                      circle
                    />
                  </div>
                  <table
                    border="0"
                    style="margin: 20px auto; width: 300px; text-align: center"
                    cellpadding="6"
                    cellspacing="0"
                  >
                    <tr>
                      <td>论坛日均访问量</td>
                      <td>179人次</td>
                    </tr>
                    <tr>
                      <td>日均活跃人数</td>
                      <td>52人</td>
                    </tr>
                    <tr>
                      <td>日均新增内容</td>
                      <td>13条</td>
                    </tr>
                    <tr>
                      <td>日均互动数</td>
                      <td>41条</td>
                    </tr>
                    <tr>
                      <td>宣传互动</td>
                      <td>219次</td>
                    </tr>
                    <tr>
                      <td>处理举报信息</td>
                      <td>36条</td>
                    </tr>
                    <tr>
                      <td>处理违规发言</td>
                      <td>49人次</td>
                    </tr>
                  </table>
                </div>
              </el-card>
            </div>
          </div>

          <el-divider>活动数据统计</el-divider>
          <div class="two_chart_line">
            <el-card
              class="left_card_of_2charts"
              shadow="hover"
              :body-style="{ padding: '5px'}"
            >
              <div
                id="activity_bubble_chart"
                :style="{width: '310px', height: '350px'}"
              />
            </el-card>
            <el-card
              shadow="hover"
              :body-style="{ padding: '5px'}"
            >
              <h3 style="text-align: center; max-height: 50px">党建活动组织工作量化表</h3>
              <!--表格内容：组织活动xx项，总活动时长xxx小时，活动报名xxx人次，实际参与xxx人次，活动宣传xx条，宣传信息阅读量xxxx人次-->
              <div style="width: 500px; height: 300px; ">
                <div style="width: 100%; text-align: center">
                  <el-date-picker
                    v-model="activity_stats_range"
                    size="mini"
                    style="width: 250px; margin: 0 10px;"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                  />
                  <el-button
                    size="mini"
                    icon="el-icon-search"
                    circle
                  />
                </div>
                <table
                  border="0"
                  style="margin: 20px auto; max-height: 300px; width: 350px; text-align: center"
                  cellpadding="7"
                  cellspacing="0"
                >
                  <tr>
                    <td>共组织活动</td>
                    <td>29项</td>
                  </tr>
                  <tr>
                    <td>总活动时常</td>
                    <td>38小时</td>
                  </tr>
                  <tr>
                    <td>活动报名</td>
                    <td>159人次</td>
                  </tr>
                  <tr>
                    <td>实际参与</td>
                    <td>167人次</td>
                  </tr>
                  <tr>
                    <td>活动宣传</td>
                    <td>36条</td>
                  </tr>
                  <tr>
                    <td>宣传信息阅读量</td>
                    <td>537人次</td>
                  </tr>
                </table>
              </div>
            </el-card>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { listUser } from '@/api/system/user'
// import echarts from 'echarts'
import * as echarts from 'echarts'
import 'echarts-wordcloud/dist/echarts-wordcloud'
import 'echarts-wordcloud/dist/echarts-wordcloud.min'

export default {
  name: 'Index',
  data() {
    return {
      active: 0,
      /** dialog开启标志 */
      cpcMemberIdentifyDialogFlag: false,
      cpcMemberAddDialogFlag: false,
      edit_cpc_member_dialog_flag: false,
      new_post_dialog_flag: false,
      ban_dialog_flag: false,
      post_report_check_dialog_flag: false,
      view_post_dialog_flag: false,
      new_activity_dialog_flag: false,
      sign_dialog_flag: false,
      view_activity_dialog_flag: false,
      /** dialog数据 */
      new_activity_info: {
        title: '',
        content: '',
        time: '',
        create_time: '',
        place: '',
        creater: ''
      },
      identifyList: [ // 身份认证请求信息
        {
          name: '李红军',
          address: '绿洲小区3号楼302',
          ID_number: '230403196905010056',
          phone: '18217769695',
          state: '未处理'
        }
      ],
      user_queryParams: {
        name: '',
        ID_number: '',
      },
      new_cpc_info: {
        id: '',
        name: '',
        phone: '',
        address: '',
        register_add: '',
        ID_number: '',
        gender: '',
        birth: '',
        nation: '',
        age: '',
        join_date: '',
        remark: ''
      },
      new_cpc_post_info: {
        title: '',
        content: '',
        pic: [],
        top_status: false
      },
      fileList: [
      ],
      ban_user_list: [
        {
          name: '李大壮',
          free_time: '2021-7-15 00:00:00',
          reason: '发布欺诈信息'
        },
        {
          name: '郑晓梅',
          free_time: '2021-7-30 00:00:00',
          reason: '发布反动信息'
        },
      ],
      report_post_list: [
        {
          title: '测试标题测试测试标题测',
          author_id: '20123',
          author_name: '赵德胤',
          create_time: '2021-6-20 13:15:23',
          views: 55,
          comments: 5,
          reason: '不实信息',
          info: '这条信息已经被央视辟谣了',
          state: '未处理'
        },
        {
          title: '测试标题测试测试标题测试测试标题测试',
          author_id: '20123',
          author_name: '赵德胤',
          report_time: '2021-6-12 13:15:23',
          views: 55,
          comments: 5,
          reason: '反动信息',
          info: '帖子有宣扬邪教的嫌疑',
          state: '已处理'
        },
      ],
      url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
      srcList: [
        'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
      ],
      sign_pic_url: 'https://z3.ax1x.com/2021/07/07/R7cj9H.jpg',
      comment_list: [
        {
          time: '2021-6-10 10:20:19',
          name: '王清峰',
          content: '这个新闻被辟谣了是假的',
        },
        {
          time: '2021-6-12 15:20:19',
          name: '李志新',
          content: '真的吧，抖音都发了',
        },
        {
          time: '2021-6-10 10:20:19',
          name: '王清峰',
          content: '这个新闻被辟谣了是假的',
        },
        {
          time: '2021-6-12 15:20:19',
          name: '李志新',
          content: '真的吧，抖音都发了',
        },
        {
          time: '2021-6-10 10:20:19',
          name: '王清峰',
          content: '这个新闻被辟谣了是假的',
        },
        {
          time: '2021-6-12 15:20:19',
          name: '李志新',
          content: '真的吧，抖音都发了',
        },
        {
          time: '2021-6-10 10:20:19',
          name: '王清峰',
          content: '这个新闻被辟谣了是假的',
        },
        {
          time: '2021-6-12 15:20:19',
          name: '李志新',
          content: '真的吧，抖音都发了',
        }
      ],
      // 报名列表
      sign_list: [
        {
          name: '郑成河',
          time: '2021-6-15 15:19:18'
        },
        {
          name: '李达',
          time: '2021-6-16 15:19:18'
        },
        {
          name: '沈琳',
          time: '2021-6-15 15:19:18'
        },
        {
          name: '李达',
          time: '2021-6-16 15:19:18'
        },
        {
          name: '郑成河',
          time: '2021-6-15 15:19:18'
        },
        {
          name: '李达',
          time: '2021-6-16 15:19:18'
        },
        {
          name: '沈琳',
          time: '2021-6-15 15:19:18'
        },
        {
          name: '李达',
          time: '2021-6-16 15:19:18'
        },
      ],
      // 签到列表
      join_list: [],
      // 加载-遮罩层
      query_loading: false,
      export_loading: false,
      activeName: 'first',
      CPCqueryParams: {
        pageNum: 1,
        pageSize: 10,
        name: undefined,
        gender: 'all',
        phone: undefined,
        address: undefined
      },
      genderOptions: [
        {
          value: 'all',
          label: '不限'
        }, {
          value: 'male',
          label: '男'
        }, {
          value: 'female',
          label: '女'
        }
      ],
      total: '1',
      cpc_list: [
        {
          id: '20481',
          name: '赵启霖',
          phone: '18217769695',
          address: '红星街道绿洲小区9号楼302',
          ID_number: '230403197405010234',
          gender: '男',
          birth: '1974-5-1',
          nation: '汉',
          age: '47',
          join_date: '1998-7-13',
          cpc_age: '23年',
          register_add: '吉林德惠',
          remark: ''
        },
        {
          id: '20442',
          name: '李文秀',
          phone: '18217713318',
          address: '西四街道站前小区1号楼302',
          ID_number: '230403198212010234',
          gender: '女',
          birth: '1982-12-1',
          nation: '汉',
          age: '39',
          join_date: '2004-7-13',
          cpc_age: '17年',
          register_add: '浙江杭州',
          remark: ''
        }
      ],
      BBSqueryParams: {
        pageNum: 1,
        pageSize: 10,
        title: undefined,
        author: undefined,
        create_time: undefined
      },
      post_list: [
        {
          post_id: '2000019349401',
          title: '测试标题测试测试标题测试测试标题测试',
          author_id: '20123',
          author_name: '赵德胤',
          create_time: '2021-6-12 13:15:23',
          views: 55,
          comments: 5,
          top_status: '置顶'
        },
        {
          post_id: '2000019349401',
          title: '测试标题测试测试标题测试',
          author_id: '20113',
          author_name: '李明英',
          create_time: '2021-6-10 10:23:00',
          views: 130,
          comments: 13,
          top_status: ''
        }
      ],
      ActivityqueryParams: {
        pageNum: 1,
        pageSize: 10,
        create_time: undefined,
        hold_time: undefined,
        info: undefined
      },
      activity_list: [
        {
          activity_id: '202107010013',
          title: '建党百年合唱活动',
          time: '2021-7-1',
          place: '海淀区剧院',
          create_time: '2021-6-10',
          create_person: '党支部书记',
          views: 319,
          signs: 25,
          joins: 23
        }
      ],
      // 热力图时间范围
      heat_data_range: (() => {
        const end = new Date()
        const start = new Date('1/1/2021')
        return [start, end]
      })(),
      bbs_stats_range: (() => {
        const end = new Date()
        const start = new Date('1/1/2021')
        return [start, end]
      })(),
      activity_stats_range: (() => {
        const end = new Date()
        const start = new Date('1/1/2021')
        return [start, end]
      })(),
      // 词云数据
      word_data: [
        {
          name: '十九大精神',
          value: 15000
        },
        {
          name: '两学一做',
          value: 10081
        }, {
          name: '中华民族',
          value: 9386
        },
        {
          name: '马克思主义',
          value: 7500
        },
        {
          name: '民族复兴',
          value: 7500
        },
        {
          name: '社会主义制度',
          value: 6500
        },
        {
          name: '国防白皮书',
          value: 6500
        },
        {
          name: '创新',
          value: 6000
        },
        {
          name: '民主革命',
          value: 4500
        },
        {
          name: '文化强国',
          value: 3800
        },
        {
          name: '国家主权',
          value: 3000
        },
        {
          name: '伟大复兴',
          value: 2500
        },
        {
          name: '领土完整',
          value: 2300
        },
        {
          name: '安全',
          value: 2000
        },
        {
          name: '从严治党',
          value: 1900
        },
        {
          name: '现代化经济体系',
          value: 1800
        },
        {
          name: '国防动员',
          value: 1700
        },
        {
          name: '信息化战争',
          value: 1600
        },
        {
          name: '局部战争',
          value: 1500
        },
        {
          name: '教育',
          value: 1200
        },
        {
          name: '中国梦',
          value: 1100
        },
        {
          name: '孙子兵法',
          value: 900
        },
        {
          name: '一国两制',
          value: 800
        },
        {
          name: '特色社会主义思想',
          value: 700
        }
      ],
      active_cpc_member_data: [
        {
          index: '1',
          name: '毛凤英',
          gender: '女',
          age: '51',
          cpc_age: '30',
          signs: '12',
          joins: '12',
          posts: '31',
          comments: '69'
        },
        {
          index: '2',
          name: '李大钊',
          gender: '男',
          age: '66',
          cpc_age: '46',
          signs: '10',
          joins: '9',
          posts: '14',
          comments: '57'
        },
        {
          index: '3',
          name: '胡适',
          gender: '男',
          age: '51',
          cpc_age: '30',
          signs: '9',
          joins: '9',
          posts: '31',
          comments: '69'
        },
        {
          index: '4',
          name: '叶剑英',
          gender: '男',
          age: '51',
          cpc_age: '30',
          signs: '12',
          joins: '12',
          posts: '31',
          comments: '69'
        },
        {
          index: '5',
          name: '刘少奇',
          gender: '男',
          age: '51',
          cpc_age: '30',
          signs: '12',
          joins: '12',
          posts: '31',
          comments: '69'
        },
        {
          index: '6',
          name: '江姐',
          gender: '女',
          age: '51',
          cpc_age: '30',
          signs: '12',
          joins: '12',
          posts: '31',
          comments: '69'
        },
        {
          index: '7',
          name: '李兰英',
          gender: '女',
          age: '51',
          cpc_age: '30',
          signs: '12',
          joins: '12',
          posts: '31',
          comments: '69'
        },
        {
          index: '8',
          name: '李兰英',
          gender: '女',
          age: '51',
          cpc_age: '30',
          signs: '12',
          joins: '12',
          posts: '31',
          comments: '69'
        },
        {
          index: '9',
          name: '李兰英',
          gender: '女',
          age: '51',
          cpc_age: '30',
          signs: '12',
          joins: '12',
          posts: '31',
          comments: '69'
        },
        {
          index: '10',
          name: '李兰英',
          gender: '女',
          age: '51',
          cpc_age: '30',
          signs: '12',
          joins: '12',
          posts: '31',
          comments: '69'
        }
      ]
    }
  },
  mounted() {
    this.draw_cpc_member_pie_chart()
    this.draw_cpc_age_bar_chart()
    this.draw_cpc_bbs_heat_chart(this.heat_data_range[0], this.heat_data_range[1])
    this.draw_word_cloud_chart()
    this.draw_activity_bubble_chart()
  },
  methods: {
    to_cpc_member_page() {
      // this.$router.pop();
      this.$router.push({ path: 'memberDetail' })
      // console.log(this.$router)
    },
    create_activity() {
      this.new_activity_dialog_flag = false
      this.$message({
        type: 'success',
        message: '创建活动成功!'
      })
    },
    operation_success() {
      this.$message({
        type: 'success',
        message: '操作成功!'
      })
    },
    delete_activity() {
      this.$confirm('该活动将被删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    select_ban_time() {
      this.$confirm('该用户将被禁言7天, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '禁言成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消禁言'
        })
      })
    },
    reject_report() {
      this.$message({
        type: 'info',
        message: '已驳回该举报'
      })
    },
    cancel_ban() {
      this.$message({
        message: '解除禁言成功!',
        type: 'success'
      })
    },
    create_cpc_post() {
      this.new_post_dialog_flag = false
      this.$message({
        message: '成功发布党员论坛帖!',
        type: 'success'
      })
    },
    post_to_top() {
      this.$message({
        message: '置顶操作成功!',
        type: 'success'
      })
    },
    handleRemove(file, fileList) {
      console.log(file, fileList)
    },
    handlePreview(file) {
      console.log(file)
    },
    next() {
      if (this.active++ > 1) this.active = 0
    },
    handle_add_cpc_dialog_close() {
      this.active = 0
      this.cpcMemberAddDialogFlag = false
      this.new_cpc_info.ID_number = ''
    },

    draw_cpc_member_pie_chart() {
      const myChart = echarts.init(document.getElementById('cpc_member_chart'))
      var option = {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        title: {
          text: '党员总人数：111人',
          x: 'left',
          y: 'top'
        },
        toolbox: {
          show: true,
          orient: 'vertical',
          left: 'right',
          top: 'bottom',
          feature: {
            saveAsImage: { show: true }
          }
        },
        series: [
          {
            name: '性别',
            type: 'pie',
            selectedMode: 'single',
            radius: [0, '25%'],
            label: {
              position: 'inner',
              fontSize: 12
            },
            data: [
              { value: 64, name: '男' },
              { value: 47, name: '女' }
            ]
          },
          {
            name: '年龄',
            type: 'pie',
            radius: ['35%', '50%'],
            startAngle: 180,
            itemStyle: {
              // borderRadius: 20,
              // // borderColor: '#fff',
              // borderWidth: 2,
              labelLine: {
                normal: {
                  length: 2
                }
              }
            },
            data: [
              { value: 24, name: '30岁及以下' },
              { value: 19, name: '31-40岁' },
              { value: 37, name: '41-50岁' },
              { value: 20, name: '51-60岁' },
              { value: 11, name: '61岁及以上' }
            ]
          }
        ]
      }
      myChart.setOption(option)
    },
    draw_cpc_age_bar_chart() {
      var app = {}
      var posList = [
        'left', 'right', 'top', 'bottom',
        'inside',
        'insideTop', 'insideLeft', 'insideRight', 'insideBottom',
        'insideTopLeft', 'insideTopRight', 'insideBottomLeft', 'insideBottomRight'
      ]
      app.configParameters = {
        rotate: {
          min: -90,
          max: 90
        },
        align: {
          options: {
            left: 'left',
            center: 'center',
            right: 'right'
          }
        },
        verticalAlign: {
          options: {
            top: 'top',
            middle: 'middle',
            bottom: 'bottom'
          }
        },
        position: {
          options: posList.reduce(function(map, pos) {
            map[pos] = pos
            return map
          }, {})
        },
        distance: {
          min: 0,
          max: 100
        }
      }

      app.config = {
        rotate: 90,
        align: 'left',
        verticalAlign: 'middle',
        position: 'insideBottom',
        distance: 15
      }

      // 基于准备好的dom，初始化echarts实例
      const myChart = echarts.init(document.getElementById('cpc_age_chart'))
      // 绘制图表
      myChart.setOption({
        title: {
          text: '党龄统计图',
          x: 'center',
          y: 'bottom'
        },
        color: ['#5470c6', '#fac858', '#91cc75'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          data: ['全部', '男', '女']
        },
        toolbox: {
          show: true,
          orient: 'vertical',
          left: 'right',
          top: 'center',
          feature: {
            magicType: { show: true, type: ['stack', 'tiled'] },
            saveAsImage: { show: true }
          }
        },
        xAxis: [
          {
            type: 'category',
            name: '党龄',
            axisTick: { show: false },
            data: ['1年以内', '1-5年', '5-10年', '10-20年', '20年以上']
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '人数'
          }
        ],
        series: [
          {
            name: '男',
            type: 'bar',
            barGap: 0,
            emphasis: {
              focus: 'series'
            },
            data: [22, 36, 51, 16, 12]
          },
          {
            name: '女',
            type: 'bar',
            emphasis: {
              focus: 'series'
            },
            data: [32, 30, 31, 32, 18]
          }
        ]
      })
    },
    getVirtulData(start_date, end_date) {
      // console.log('这里', start_date.toString(), end_date.toString())
      var s_year = start_date.getFullYear()
      var s_month = start_date.getMonth()
      var s_day = start_date.getDate()
      var e_year = end_date.getFullYear()
      var e_month = end_date.getMonth()
      var e_day = end_date.getDate()
      var date = +echarts.number.parseDate(s_year + '-' + s_month + '-' + s_day)
      var end = +echarts.number.parseDate(e_year + '-' + e_month + '-' + e_day)
      var dayTime = 3600 * 24 * 1000
      var data = []
      for (var time = date; time <= end; time += dayTime) {
        data.push([
          echarts.format.formatTime('yyyy-MM-dd', time),
          Math.floor(Math.random() * 100)
        ])
      }
      // console.log('执行到这')
      return data
    },
    draw_cpc_bbs_heat_chart() {
      var option = {
        visualMap: {
          min: 0,
          max: 100,
          calculable: true,
          orient: 'horizontal',
          left: 'right',
          top: 'top'
        },
        tooltip: {
          position: 'top'
        },
        calendar: [{
          range: this.heat_data_range[0].getFullYear(),
          cellSize: [15, 20]
        }],

        series: [{
          type: 'heatmap',
          coordinateSystem: 'calendar',
          calendarIndex: 0,
          data: this.getVirtulData(this.heat_data_range[0], this.heat_data_range[1])
        }]
      }
      const myChart = echarts.init(document.getElementById('cpc_bbs_heat_chart'))
      myChart.setOption(option)
    },
    draw_word_cloud_chart() {
      const myChart = echarts.init(document.getElementById('mywordcloud'))
      // console.log('lll');
      var option = {
        // title: {
        //   text: "论坛词云统计图",
        //   subtext: '2021年度',
        //   x: "left",
        //   y: "top"
        // },
        backgroundColor: '#fff',
        series: [
          {
            type: 'wordCloud',
            gridSize: 10,
            sizeRange: [14, 60],
            rotationRange: [0, 0],
            textStyle: {
              normal: {
                color: function() {
                  return (
                    'rgb(' +
                    Math.round(Math.random() * 255) +
                    ', ' +
                    Math.round(Math.random() * 255) +
                    ', ' +
                    Math.round(Math.random() * 255) +
                    ')'
                  )
                }
              }
            },
            left: 'center',
            top: 'center',
            right: null,
            bottom: null,
            width: '200%',
            height: '200%',
            // 数据
            data: this.word_data
          }
        ]
      }
      myChart.setOption(option)
    },
    draw_activity_bubble_chart() {
      const myChart = echarts.init(document.getElementById('activity_bubble_chart'))
      var month = ['1月', '2月', '3月', '4月', '5月', '6月', '7月',
        '8月', '9月', '10月', '11月', '12月']
      var days = ['周一', '周二',
        '周三', '周四', '周五', '周六', '周日']
      // [星期，月份，大小]
      var data = [[0, 0, 0], [0, 1, 1], [0, 2, 0], [0, 3, 2], [0, 4, 1], [0, 5, 0], [0, 6, 5], [0, 7, 2], [0, 8, 0], [0, 9, 0], [0, 10, 0], [0, 11, 2], [1, 0, 0], [1, 1, 0], [1, 2, 0], [1, 3, 0], [1, 4, 0], [1, 5, 0], [1, 6, 2], [1, 7, 0], [1, 8, 0], [1, 9, 0], [1, 10, 0], [1, 11, 2], [2, 0, 1], [2, 1, 1], [2, 2, 0], [2, 3, 0], [2, 4, 0], [2, 5, 0], [2, 6, 3], [2, 7, 0], [2, 8, 0], [2, 9, 0], [2, 10, 1], [2, 11, 2], [3, 0, 0], [3, 1, 3], [3, 2, 0], [3, 3, 0], [3, 4, 0], [3, 5, 0], [3, 6, 4], [3, 7, 0], [3, 8, 1], [3, 9, 0], [3, 10, 0], [3, 11, 4], [4, 0, 1], [4, 1, 3], [4, 2, 0], [4, 3, 0], [4, 4, 0], [4, 5, 1], [4, 6, 0], [4, 7, 0], [4, 8, 0], [4, 9, 2], [4, 10, 0], [4, 11, 4], [5, 0, 0], [5, 1, 1], [5, 2, 0], [5, 3, 3], [5, 4, 0], [5, 5, 0], [5, 6, 3], [5, 7, 0], [5, 8, 2], [5, 9, 0], [5, 10, 0], [5, 11, 1], [6, 0, 0], [6, 1, 0], [6, 2, 0], [6, 3, 0], [6, 4, 0], [6, 5, 0], [6, 6, 6], [6, 7, 6], [6, 8, 0], [6, 9, 0], [6, 10, 1], [6, 11, 0]]
      var option = {
        title: {
          text: '党建活动数据气泡图'
        },
        legend: {
          data: ['党建活动'],
          left: 'right'
        },
        polar: {},
        tooltip: {
          formatter: function(params) {
            return params.value[2] + ' in ' + days[params.value[0]] + ' of ' + month[params.value[1]]
          }
        },
        angleAxis: {
          type: 'category',
          data: month,
          boundaryGap: false,
          splitLine: {
            show: true
          },
          axisLine: {
            show: false
          }
        },
        radiusAxis: {
          type: 'category',
          data: days,
          axisLine: {
            show: false
          },
          axisLabel: {
            rotate: 45
          }
        },
        series: [{
          name: '党建活动',
          type: 'scatter',
          coordinateSystem: 'polar',
          symbolSize: function(val) {
            return val[2] * 4
          },
          data: data,
          animationDelay: function(idx) {
            return idx * 5
          }
        }]
      }
      myChart.setOption(option)
    },

    handleClick(tab, event) {
      console.log(tab, event)
    },
    /** 查询党员列表 */
    get_cpc_list() {
      this.query_loading = true
      console.log('query')
      this.query_loading = false
    },
    /** 搜索按钮操作 */
    cpc_Query() {
      this.CPCqueryParams.page = 1
      this.get_cpc_list()
    },
    post_Query() {
      this.Post_queryParams.page = 1
      this.get_cpc_list()
    },
    activity_Query() {
      this.Activity_queryParams.page = 1
      this.get_cpc_list()
    },
    /** 重置表单 */
    resetMemberQuery() {
      console.log('reset query info')
    },

    /** 批准身份认证请求 */
    pass_cpc_member_check(row) {
      row.state = '已批准'
      this.$message({
        message: '操作成功，您已添加该用户为党员',
        type: 'success'
      })
    },
    /** 驳回身份认证请求 */
    reject_cpc_member_check(row) {
      row.state = '已驳回'
      this.$message('您已驳回该身份认证请求')
    },

    /** 表格上方的添加按钮 */
    add_cpc_member() {
      // this.cpc_list.push(this.newMemberInfo)
      this.cpcMemberAddDialogFlag = false
      this.$message({
        message: '操作成功，您已添加该用户为党员',
        type: 'success'
      })
    },
    check_user_exist(str) {
      var reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/
      if (reg.test(str)) {
        this.next()
      } else {
        this.$message.error('身份证号无效，请确认后重新输入')
      }
    },

    handleAdd() {
      console.log('add cpc')
    },

    /** 删除按钮*/
    deleteCpcMember() {
      this.$confirm('删除该条党员信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    delete_cpc_post() {
      this.$confirm('删除该条论坛帖, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // single_cpc_delete(index, row){
    //   // this.cpc_list.splice(index, 1);
    //   this.$message({
    //     type: 'success',
    //     message: '删除成功!'
    //   })
    // },
    handleDelete() {
      console.log('delete cpc')
    },

    edit_cpc_member() {
      this.$message({
        message: '修改党员信息成功!',
        type: 'success'
      })
      this.edit_cpc_member_dialog_flag = false
    },
    handleImport() {
      console.log('import cpc')
    },
    handleExport() {
      console.log('export cpc')
    },
    handleSelectionChange() {
      console.log('select user')
    }
  }
}
</script>

<style scoped>
.right_float {
  display: flex;
  justify-content: flex-end;
}
.two_chart_line div {
  display: inline-block;
}
.two_chart_line {
  display: flex;
  justify-content: center;
}
.left_card_of_2charts {
  margin-right: 30px;
}
table,
table tr th,
table tr td {
  border: 1px solid lightgray;
  font-size: small;
}
</style>
